<template>
  <el-container class="main-container">
   

    <el-container>
      <el-aside class="sidebar" width="200px">

        <div class="sidebar-item">数据集总览</div>

      </el-aside>
      <el-main class="content-area">
        <div v-if="show == 1">
          <DataImport @click="n_step"></DataImport>
        </div>

        <div v-if="show >= 2 && show <= 3">
          <span id="i">|&nbsp;</span><span class="f">创建信息</span>
          <br><br>
          <span id="d_ID">数据集ID:</span>
          <input id="d_ID1" v-model="text">
          <span id="version">版本号&nbsp;</span>
          <select v-model="selected">
            <option disabled value="">请选择版本</option>
            <option>V1</option>
            <option>V2</option>
            <option>V3</option>
            <option>V4</option>
          </select>
          <br><br><br>
          <span id="remark">备注</span>
          <input v-model="remarks" id="re" v-bind:class="{ hidden: show }">
          <br><br><br>
          <span id="i">|&nbsp;</span><span class="f">统计信息</span>
          <br><br>
          <span id="column" v-on="column">列数&nbsp;{{ column }}</span>
          <span id="row" v-on="row">列数&nbsp;{{ row }}</span>
  
          <br><br><br>
          <span id="i">|&nbsp;</span><span class="f">导入数据</span>
          <br><br>
        </div>

        <div v-if="show == 2">
          <fileUpload></fileUpload>
          <button @click="n_step" id="but">下一步</button>
          <button id="but1">取消</button>
          <div id="j"></div>
        </div>

        <div v-if="show == 3">
          <TableDate></TableDate>
          <button id="but1" @click="n_step">保存</button>
          <button @click="p_step" id="but2">取消</button>
        </div>

        <div v-if="show == 4">
          <PopFrame @response="(msg) => show=msg"></PopFrame>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import fileUpload from '../components/fileupload.vue'
import TableDate from '../components/file.vue'
import DataImport from "./Dataimport.vue"
import PopFrame from "./PopFrame.vue"
const text = ref("请输入ID")
const selected = ref('V1')
const remarks = ref(" ")
const show = ref(1)
// const show1 = ref("false")
const row = ref(0)
const column = ref(0)

function w_step(n) {
  show = n
}

function n_step() {
  show.value++;
}

function p_step() {
  show.value--;
}

// function switchToTableDate() {
//   show.value = false// 切换到 TableDate 组件

// }
// function switchuploadFile() {
//   show.value = true// 切换到 TableDate 组件

// }

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
svg {
  width: 40px;
  height: 40px;
}


#i {
  font-size: 20px;
  font-weight: bolder;
}

.f {
  font-weight: bolder;
}

#d_ID {
  margin: 0 50px 10px 20px;
  color: darkgrey;
}

#d_ID1 {
  border: 0;
  width: 100px;
  margin-right: 30px;

}

#version,
#d_ID,
#remark,
#column,
#row {
  color: darkgrey;
}

#remark {
  margin: 0 30px 0 20px;
}

#column {
  margin: 0 180px 0 20px;

}

#row {
  margin: 0 0 0 30px;
}

.color {
  color: darkgrey;
}

.m {
  margin: 40px 100px 0 48px;
}

#but {
  margin: 20px 60px 0 80px;
}

#but1 {
  width: 60px;
}

#but2 {
  width: 60px;
  margin-left: 60px;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}
.sidebar {
  background-color: #a0cfff;

}

.sidebar-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.content-area {

  padding: 20px;
}

button:hover {
  cursor: pointer;
  background-color: #909399;
  border-color: #909399;
}

#j {
  height: 165px;
}</style>
